<template>
  <div style = "padding: 10px 30px">
    <h2>编辑个人信息</h2>
    <el-row>
      <!--左侧表单-->
      <el-col :span = "14">
        <el-form :model = "form" label-width = "120px">
          <el-form-item label = "昵称：">
            <el-input v-model = "form.name" />
          </el-form-item>
          <el-form-item label = "介绍：">
            <el-input v-model = "form.name" type = "textarea" />
          </el-form-item>
          <el-form-item label = "性别：">
            <el-radio-group v-model = "form.resource">
              <el-radio label = "男" />
              <el-radio label = "女" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label = "生日">
            <el-date-picker
                v-model = "value1"
                type = "date"
                placeholder = "Pick a day"
                :size = "size"
            />
          </el-form-item>
          <el-form-item label = "地区">
            <el-select v-model = "value" class = "m-2" placeholder = "Select" size = "large">
              <el-option
                  v-for = "item in options"
                  :key = "item.value"
                  :label = "item.label"
                  :value = "item.value"
              />
            </el-select>
            <el-select v-model = "value" class = "m-2" placeholder = "Select" size = "large">
              <el-option
                  v-for = "item in options"
                  :key = "item.value"
                  :label = "item.label"
                  :value = "item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button class = "add-playlist">提交</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <!--右侧用户头像-->
      <el-col class = "column-center-container" :span = "10">
        <div class = "column-center-container" style = "width: 300px">
          <el-image style = "width: 200px;height:200px;" :src = "logo" />
          <el-button style = "margin: 10px 0">修改头像</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
// do not use same name with ref
import {reactive} from "vue";
import logo from '@/assets/logo.png'

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
</script>

<style lang = "less" scoped>
.add-playlist {
  border-radius: 10px;
  color: #fff;
  background-color: var(--main-color);

  &:hover {
    color: #fff;
    background-color: #d86767;
  }
}

</style>